import { View } from "@tarojs/components"
import { CSSProperties } from "react"
import { Axis } from "../consts"



interface DividerProps {
    axis?: Axis,
    className?: string,
    color?: string,
    width?: number,
    marginTop?: number
    marginBottom?: number
}

const Divider = (props: DividerProps) => {

    let style: CSSProperties
    let axis = props.axis ?? Axis.horizontal

    if (axis == Axis.horizontal) {
        style = {
            height: `${props.width ?? 2}rpx`,
            width: "100%",
            backgroundColor: `${props.color ?? "#C5C1A4"}`,
            
        }

        if (props.marginTop) {
            style.marginTop = props.marginTop + 'rpx'
        }

        if (props.marginBottom) {
            style.marginBottom = props.marginBottom + 'rpx'
        }

    } else {
        style = {
            width: `${props.width ?? 2}rpx`,
            height: "100%",
            backgroundColor: `${props.color ?? "#C5C1A4"}`
        }
    }

    return (
        <View style={style} className={props.className}></View>
    )
}

export default Divider